import React ,{useState,useEffect} from 'react';
import {useSelector} from 'react-redux'
import {Route, Routes} from "react-router-dom";
import NotFound from "../view/NotFound/NotFound";

//一次性引入 view 下的所有的tsx文件
const module = import.meta.glob('../view/**/*.tsx')
//深拷贝的方法
const cloneDeep =(obj = {}) => {
    //变量先置空
    let newobj = null;
    //判断是否需要继续进行递归
    if (typeof (obj) == 'object' && obj !== null) {
        newobj = obj instanceof Array ? [] : {};
        //进行下一层递归克隆
        for (var i in obj) {
            newobj[i] = cloneDeep(obj[i])
        }
        //如果不是对象直接赋值
    } else newobj = obj;
    return newobj;
}

//对路由的结构树 进行扁平化处理
const treeToArray =(routes)=>{

    // console.log("module的文件",module)
    //创建一个空数组，用来保存处理之后的数据
    let result = []
    for(var index in routes){
        var obj =routes[index]
        var clone = cloneDeep(obj)
        delete clone.children//删除所有的children 空数组，避免产生过多的冗余信息
        //如果存在component就保存下来
        if(obj.component){
            result.push(clone)
        }
        //如果存在children ，调用这个方法把他保存下来
        if(obj.children){
            var tem  = treeToArray(obj.children)
            //数组合并
            result=result.concat(tem)
        }
    }
    //返回的数组为扁平结构了
    return result
}

//路由数据 的处理方法
const toRouteDom =(routes)=>{
    //对路由的结构树 进行扁平化处理
    var res = treeToArray(routes)
    // console.log("扁平化的数据:",res)
    const resultDom = res.map(item =>{
        //做组件的动态加载
        // console.log(item.component,'../view/'+item.component+'/'+item.component+'.tsx')
        // console.log(module['../view/'+item.component+'/'+item.component+'.tsx'])
        const Com = React.lazy(module['../view/'+item.component+'/'+item.component+'.tsx'])
        // console.log(item.id,item.path)
        return <Route key={item.id} path={item.path} element={<Com />}></Route>
    })
    // console.log(resultDom)
    //返回处理完成的数据--动态加载后的
    return resultDom
}
function RenderChildrenRouter() {
    //拿到用户能访问的路由权限
    const { route } = useSelector(state => state.userStore.user)
    //设置用户能访问的 组件页面
    const [dom ,setDom ] = useState(null)

    //数据发生改变时对数据进行操作

    useEffect(()=>{
        //将拿到的数据进行处理
        var d = toRouteDom(route)
        setDom(d)
    }, [])
    return (
        <Routes>
            {dom}
            <Route key={Date.now()} path='*' element={<NotFound />}></Route>
        </Routes>
    );
}

export default RenderChildrenRouter;